<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>皇室蛋糕</title>
<link rel="shortcut icon" type="image/x-icon" href="resource/bifavi.ico" rel="external nofollow" /> 
<link rel="stylesheet" type="text/css" href="res/static/css/main.css">
<link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
<script type="text/javascript" src="res/layui/layui.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style type="text/css">
.imgg {
	width: 280px;
	height: 290px;
}
</style>
</head>

<body>

	<!-- 所有商品 -->

	<div class="site-nav-bg">
		<div class="site-nav w1200">
			<p class="sn-back-home">
				<i class="layui-icon layui-icon-home"></i> <a href="index.jsp">首页</a>
			</p>
			<div class="sn-quick-menu">
				<div class="login">
					<c:if test="${CURR_COM == null }">
						<a href="goConsumerLogin">登录</a>
					</c:if>
					<c:if test="${CURR_COM != null }">
						<a href="gopersoninfo"><c:out value="${CURR_COM}" /></a>  &nbsp; &nbsp; &nbsp;
						<a href="zhuxiao">注销</a>
					</c:if>
				</div>
				<div class="sp-cart">
					<a href="goshopcar">购物车</a><span><c:if
							test="${CURR_NUM == null }"></c:if> <c:if
							test="${CURR_NUM != null }">
							<c:out value="${CURR_NUM}" />
						</c:if></span>
				</div>
			</div>
		</div>
	</div>



	<div class="header">
		<div class="headerLayout w1200">
			<div class="headerCon">
				<h1 class="mallLogo">
					<a href="index.jsp" title="皇室蛋糕"> <img
						src="images/img/logo1.png">
					</a>
				</h1>
				<div class="mallSearch">
					<form action="goSearchJsp" class="layui-form" novalidate>
						<input type="text" name="title" required lay-verify="required"
							autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
						<button class="layui-btn" lay-submit lay-filter="formDemo">
							<i class="layui-icon layui-icon-search"></i>
						</button>
						<input type="hidden" name="" value="">
					</form>
				</div>
			</div>
		</div>
	</div>

	<div class="content content-nav-base commodity-content">
		<div class="main-nav">
			<div class="inner-cont0">
				<div class="inner-cont1 w1200">
					<div class="inner-cont2">
						<a href="commodity.html" class="active">所有商品</a> <a href="gotusi">吐司和礼品</a>
						<a href="information.html">烘焙故事</a> <a href="aboutUs">关于我们</a>
					</div>
				</div>
			</div>
		</div>
		<div class="commod-cont-wrap">
			<div class="commod-cont w1200 layui-clear">
				<div class="left-nav">
					<div class="title">所有口味</div>
					<div class="list-box">
						<dl>
							<dt>天外飞仙</dt>
							<dd id="type3">
								<a href="javascript:;">慕斯</a>
							</dd>
							<dd id="type2">
								<a href="javascript:;">水果蛋糕</a>
							</dd>
							<dd id="type4">
								<a href="javascript:;">巧克力</a>
							</dd>
							<dd id="type5">
								<a href="javascript:;">芝士</a>
							</dd>
						</dl>
					</div>
				</div>
				<div class="right-cont-wrap">
					<div class="right-cont">
						<!--             <div class="sort layui-clear">
              <a class="active" href="javascript:;" event = 'volume' id="typedemo1">销量</a>
              <a href="javascript:;" event = 'price' id="typedemo2">价格</a>
              <a href="javascript:;" event = 'newprod' id="typedemo3">新品</a>
              <a href="javascript:;" event = 'collection' id="typedemo4">收藏</a>
            </div> -->
						<div class="prod-number">
							<!--  <span>200个</span> -->
						</div>
						<div class="cont-list layui-clear" id="list-cont">
							<!-- 模版引擎导入 -->
							<script type="text/html" id="demo">
              {{# layui.each(d.menu.milk.content,function(index,item){}}    
                <div class="item">
                  <div class="img">
                    <a href="details?name={{item.title}}"><img class="imgg" src="{{item.img}}"></a>
                  </div>
                  <div class="text">
                    <p class="title">{{item.title}}</p>
                    <p class="price">
                      <span class="pri">{{item.pri}}</span>
                      <span class="nub">{{item.nub}}</span>
                    </p>
                  </div>
                </div>
			<input type="hidden" id="hiddenDemo" value="{{d.hid}}">
              {{# }); }}
            </script>

							<div id="demo0" style="text-align: center;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
	  <!-- 底部 -->
  <div class="footer">
    <div class="ng-promise-box">
      <div class="ng-promise w1200">
        <p class="text">
          <a class="icon1" href="javascript:;">7天无理由退换货</a>
          <a class="icon2" href="javascript:;">满99元全场免邮</a>
          <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
        </p>
      </div>
    </div>
    <div class="mod_help w1200">                                     
      <p>
        <a href="aboutUs">关于我们</a>
        <span>|</span>
        <a href="helpCenter">帮助中心</a>
        <span>|</span>
        <a href="afterService">售后服务</a>
        <span>|</span>
        <a href="javascript:;">客服资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p>
      <p class="coty">皇室蛋糕版权所有 &copy; 2018-2020</p>
    </div>
  </div>
		<script>
			layui
					.config({
						base : 'res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
					})
					.use(
							[ 'mm', 'laypage', 'jquery' ],
							function() {
								var laypage = layui.laypage, $ = layui.$, mm = layui.mm;
								laypage.render({
									elem : 'demo0',
									count : 100
								//数据总数
								});

								// 模版引擎导入
								var html = demo.innerHTML;
								var listCont = document
										.getElementById('list-cont');
								// console.log(layui.router("#/about.html"))
								mm.request({
									url : 'getcommodity',
									//url: '../json/commodity.json',
									success : function(res) {
										console.log(res)
										listCont.innerHTML = mm.renderHtml(
												html, res)
									},
									error : function(res) {
										console.log(res);
									}
								})

								$('#type2').on(
										'click',
										function() {

											$('#type3').css('color', '#888888')
											$('#type4').css('color', '#888888')
											$('#type5').css('color', '#888888')
											$('#type2').css('color', '#ff5500')

											//alert("haaaaa")
											$.ajax({
												url : "getTypeCake",
												dataType : "json",
												data : "cakeTypeId=" + 2,
												type : "post",
												success : function(data) {
													// alert(data); 
													console.log(data);
													listCont.innerHTML = mm
															.renderHtml(html,
																	data)
													//$("#hiddenDemo").val("2"); 
												}
											});
										})
								$('#type3').on(
										'click',
										function() {
											$('#type2').css('color', '#888888')
											$('#type4').css('color', '#888888')
											$('#type5').css('color', '#888888')
											$('#type3').css('color', '#ff5500')
											//alert("haaaaa")
											$.ajax({
												url : "getTypeCake",
												dataType : "json",
												data : "cakeTypeId=" + 3,
												type : "post",
												success : function(data) {
													// alert(data); 
													console.log(data);

													listCont.innerHTML = mm
															.renderHtml(html,
																	data)
												}
											});
										})
								$('#type4').on(
										'click',
										function() {
											$('#type2').css('color', '#888888')
											$('#type3').css('color', '#888888')
											$('#type5').css('color', '#888888')
											$('#type4').css('color', '#ff5500')
											//alert("haaaaa")
											$.ajax({
												url : "getTypeCake",
												dataType : "json",
												data : "cakeTypeId=" + 4,
												type : "post",
												success : function(data) {
													// alert(data); 
													console.log(data);
													listCont.innerHTML = mm
															.renderHtml(html,
																	data)
												}
											});
										})
								$('#type5')
										.on(
												'click',
												function() {
													$('#type2').css('color',
															'#888888')
													$('#type4').css('color',
															'#888888')
													$('#type3').css('color',
															'#888888')
													$('#type5').css('color',
															'#ff5500')
													//alert( $('#hiddenDemo').val())
													console
															.log($(
																	'#hiddenDemo')
																	.val());
													$
															.ajax({
																url : "getTypeCake",
																dataType : "json",
																data : "cakeTypeId=" + 5,
																type : "post",
																success : function(
																		data) {
																	// alert(data); 
																	console
																			.log(data);
																	listCont.innerHTML = mm
																			.renderHtml(
																					html,
																					data)
																}
															});
												})
								$('#typedemo1')
										.on(
												'click',
												function() {
													//alert( $('#hiddenDemo').val())
													var hiddemo = $(
															'#hiddenDemo')
															.val();
													// console.log( $('#hiddenDemo').val());
													$
															.ajax({
																url : "getTypeCake",
																dataType : "json",
																data : "cakeTypeId="
																		+ 5
																		+ "&hiddemo="
																		+ hiddemo,
																type : "post",
																success : function(
																		data) {
																	// alert(data); 
																	console
																			.log(data);
																	listCont.innerHTML = mm
																			.renderHtml(
																					html,
																					data)
																}
															});
												})

								//console.log( $('#hiddenDemo').val());

								$('.sort a').on(
										'click',
										function() {
											$(this).addClass('active')
													.siblings().removeClass(
															'active');
										})
								//控制 左侧缩进
								$('.list-box dt').on(
										'click',
										function() {
											if ($(this).attr('off')) {
												$(this).removeClass('active')
														.siblings('dd').show()
												$(this).attr('off', '')
											} else {
												$(this).addClass('active')
														.siblings('dd').hide()
												$(this).attr('off', true)
											}
										})
							});
		</script>
		<!-- <img src="images/Fruits/白色红丝绒.jpg"> -->
</body>
</html>